<template>
  <div class="database-list">
    <el-card class="list-card" shadow="hover">
      <div slot="header" class="card-header">
        <span><i class="el-icon-menu"></i> 数据库实例列表</span>
        <el-button type="primary" @click="showPurchaseDialog" icon="el-icon-plus">新购</el-button>
      </div>

      <!-- 搜索和操作栏 -->
      <div class="operation-bar">
        <div class="left-operations">
          <el-button-group>
            <el-button size="small" icon="el-icon-refresh" @click="refreshList">刷新</el-button>
            <el-button size="small" icon="el-icon-download" @click="exportList">导出</el-button>
          </el-button-group>
        </div>
        <div class="search-box">
          <el-input
            v-model="searchQuery"
            placeholder="按实例名称搜索"
            prefix-icon="el-icon-search"
            clearable
            @clear="handleSearch"
            @keyup.enter.native="handleSearch">
          </el-input>
        </div>
      </div>

      <!-- 数据库实例列表 -->
      <el-table
        :data="filteredTableData"
        style="width: 100%"
        border
        v-loading="loading"
        element-loading-text="加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        stripe>
        <el-table-column prop="customerName" label="客户名称" min-width="120">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.customerName" placement="top">
              <span>{{ scope.row.customerName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="instanceName" label="实例名称" min-width="280">
          <template slot-scope="scope">
            <div class="instance-name">
              <span class="instance-id">{{ scope.row.instanceName }}</span>
              <el-tag size="mini" effect="plain" v-if="scope.row.isIntranet">内网</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dbType" label="数据库类型" min-width="150"></el-table-column>
        <el-table-column prop="configuration" label="配置" min-width="100"></el-table-column>
        <el-table-column prop="expiryDate" label="到期日期" min-width="120"></el-table-column>
        <el-table-column prop="status" label="资源状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '使用中' ? 'success' : 'info'" size="mini" effect="dark">
              <i :class="scope.row.status === '使用中' ? 'el-icon-success' : 'el-icon-info'"></i>
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="企业描述" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.description || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" @click="handleMonitor(scope.row)">监控</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="pagination-container">
        <span class="total-count">共 {{ total }} 条数据</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 新购对话框 -->
    <el-dialog
      title="购买新机"
      :visible.sync="purchaseDialogVisible"
      width="500px"
      :close-on-click-modal="false"
      @closed="resetPurchaseForm">
      <el-form :model="purchaseForm" :rules="purchaseRules" ref="purchaseForm" label-width="80px">
        <el-form-item label="企业" prop="enterprise" required>
          <el-select v-model="purchaseForm.enterprise" placeholder="请选择企业" style="width: 100%">
            <el-option
              v-for="item in enterprises"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" prop="type" required>
          <el-select v-model="purchaseForm.type" placeholder="SQLServer数据库" style="width: 100%">
            <el-option label="SQLServer数据库" value="sqlserver"></el-option>
            <el-option label="MySQL数据库" value="mysql"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="配置" prop="configuration" required>
          <el-select v-model="purchaseForm.configuration" placeholder="请选择购买商品" style="width: 100%">
            <el-option
              v-for="item in configurations"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="purchaseDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlePurchaseSubmit" :loading="submitting">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'CloudDatabaseList',
  data() {
    return {
      // 搜索相关
      searchQuery: '',
      loading: false,

      // 表格数据
      tableData: [
        {
          customerName: '多多云****09',
          instanceName: 'rds_1233825716221152_20240308054671',
          dbType: 'SQLServer 2016_web',
          configuration: '2C/4G',
          expiryDate: '2099/03/07',
          status: '使用中',
          description: '--',
          isIntranet: true
        }
      ],

      // 分页相关
      currentPage: 1,
      pageSize: 10,
      total: 1,

      // 新购对话框相关
      purchaseDialogVisible: false,
      submitting: false,
      purchaseForm: {
        enterprise: '',
        type: 'sqlserver',
        configuration: ''
      },
      purchaseRules: {
        enterprise: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择数据库类型', trigger: 'change' }
        ],
        configuration: [
          { required: true, message: '请选择配置', trigger: 'change' }
        ]
      },

      // 选项数据
      enterprises: [
        { value: '1', label: '企业A' },
        { value: '2', label: '企业B' }
      ],
      configurations: [
        { value: '2c4g', label: '2核4G' },
        { value: '4c8g', label: '4核8G' },
        { value: '8c16g', label: '8核16G' }
      ]
    }
  },
  computed: {
    filteredTableData() {
      if (!this.searchQuery) {
        return this.tableData
      }
      return this.tableData.filter(data => {
        return data.instanceName.toLowerCase().includes(this.searchQuery.toLowerCase())
      })
    }
  },
  methods: {
    // 搜索相关方法
    handleSearch() {
      this.currentPage = 1
      this.getList()
    },

    // 分页相关方法
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },

    // 表格操作方法
    handleDetail(row) {
      this.$parent.currentResource = row;
      this.$parent.activeTab = 'CloudDatabaseDashboard';
      console.log("切换到监控页面", row);
      this.$emit('showCloudDatabaseDashboard',row);
    },
    handleMonitor(row) {
      console.log('查看监控:', row)
      // 实现监控跳转逻辑
    },

    // 新购相关方法
    showPurchaseDialog() {
      this.purchaseDialogVisible = true
    },
    resetPurchaseForm() {
      if (this.$refs.purchaseForm) {
        this.$refs.purchaseForm.resetFields()
      }
      this.purchaseForm = {
        enterprise: '',
        type: 'sqlserver',
        configuration: ''
      }
    },
    handlePurchaseSubmit() {
      this.$refs.purchaseForm.validate((valid) => {
        if (valid) {
          this.submitting = true
          // 模拟API调用
          setTimeout(() => {
            this.submitting = false
            this.purchaseDialogVisible = false
            this.$message({
              message: '购买成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          }, 1500)
        }
      })
    },

    // 获取列表数据
    getList() {
      this.loading = true
      // 模拟API调用
      setTimeout(() => {
        this.loading = false
        // 这里应该是实际的API调用来获取数据
        // this.tableData = ...
        // this.total = ...
      }, 800)
    },

    // 刷新列表
    refreshList() {
      this.getList()
    },

    // 导出列表
    exportList() {
      this.$message({
        message: '正在导出数据，请稍候...',
        type: 'info',
        duration: 2000
      })
      // 实现导出逻辑
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped>
.database-list {
  padding: 0px;
}

.list-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header i {
  margin-right: 8px;
}

.operation-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.left-operations {
  display: flex;
  gap: 10px;
}

.search-box {
  width: 300px;
}

.instance-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.instance-id {
  font-family: monospace;
  color: #409EFF;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.total-count {
  color: #606266;
  font-size: 14px;
}

/* 表格样式优化 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}

.el-table th {
  background-color: #f5f7fa !important;
  color: #606266;
  font-weight: bold;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #fafafa;
}

/* 按钮样式优化 */
.el-button--text {
  padding: 0 8px;
}

.el-button--text + .el-divider--vertical {
  margin: 0 4px;
}

/* 对话框样式优化 */
.el-dialog__header {
  border-bottom: 1px solid #ebeef5;
  padding: 15px 20px;
}

.el-dialog__footer {
  border-top: 1px solid #ebeef5;
  padding: 15px 20px;
}

.el-dialog__body {
  padding: 30px 20px;
}

/* 标签样式优化 */
.el-tag--mini {
  height: 20px;
  line-height: 18px;
  padding: 0 6px;
  border-radius: 4px;
}

.el-tag--mini .el-icon-success,
.el-tag--mini .el-icon-info {
  margin-right: 3px;
}

/* 加载动画样式 */
.el-loading-spinner .el-icon-loading {
  font-size: 30px;
  color: #409EFF;
}

.el-loading-spinner .el-loading-text {
  color: #409EFF;
  margin: 3px 0;
  font-size: 14px;
}
</style>
